<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue day01</title>

</head>
<body>
<div id="app">
    <div v-text="message" v-show="isShow"></div>
    <div v-html="info"  v-if="isShowIf"></div>
    <input type="button" value="点击切换v-show" v-on:click="click">
    <input type="button" value="点击切换v-if" @click="clickIf">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /***
     * v-text 解析文本 v-html 解析HTML标签
     * v-on 绑定事件 v-show 是切换 display:none v-if 通过dom元素来显示隐藏
     */

    var app = new Vue({
        el:'#app',
        data:{
            message:'那好',
            info:'<h1>今天你的心情好吗？<h1/>',
            isShow:true,
            isShowIf:true
        },
        methods:{
            click:function () {

                // alert('事件数据');
                this.isShow = !this.isShow;
            },
            clickIf:function () {
                this.isShowIf = !this.isShowIf;
            }
        }
    })
</script>

</body>
</html>